<template>
    <div class="bus" :style="{height : h}">
        <header1 class="header1">
                <template v-slot:center>
                    <span class="center">
                            营业统计
                    </span>
                </template>
        </header1>


        <van-tabs v-model="active" line-width="25px" line-height="4px" title-active-color="#ff6e53" @change="show">
            <van-tab title="7日内">
                <div class="date">
                    <span>{{value}}</span>
                    <img src="https://cdn3.axureshop.com/demo/1525603/images/%E8%90%A5%E4%B8%9A%E7%BB%9F%E8%AE%A1/u5093.png"
                    @click="chose"  />
                </div>
            </van-tab>
            <van-tab title="30日内">
                <div class="date">
                    <span>{{value}}</span>
                    <img src="https://cdn3.axureshop.com/demo/1525603/images/%E8%90%A5%E4%B8%9A%E7%BB%9F%E8%AE%A1/u5093.png"
                    @click="chose" />
                </div>
            </van-tab>
            <van-tab title="自定义">
                <div class="date">
                    <span>{{value}}</span>
                    <img src="https://cdn3.axureshop.com/demo/1525603/images/%E8%90%A5%E4%B8%9A%E7%BB%9F%E8%AE%A1/u5093.png"
                    @click="chose" />
                </div>
            </van-tab>
        </van-tabs>
        <div class="last">
            <div class="foot">
                <div class="foot_1">
                    <p>营业总额</p>
                    <p class="foot_3">₱30,687.68</p>
                </div>
                <div class="foot_2">
                    <p>客单价</p>
                    <p class="foot_3">₱30.68</p>
                </div>
                <div class="foot_1">
                    <p>成交订单</p>
                    <p class="foot_3">5</p>
                </div>
                <div class="foot_2">
                    <p>退款订单</p>
                    <p class="foot_3">5</p>
                </div> 
            </div>
        </div>
        <van-date-picker
                    show-toolbar
                    v-model="currentDate"
					title="选择时间段"
                    :min-date="minDate"
                    :max-date="maxDate"
                    @cancel="cancel"
                    @confirm="onConfirm"
                    @change="onChange"
                    class="t1"
                    v-show="showPicker"
            >
            </van-date-picker>
    </div>
</template>
<script>
import header1 from '../../components/headerView.vue'
import VanDatePicker from '../../components//BS/DoubleTimeView.vue';
import {moni} from '../../https/MaRk'
export default {
    name : 'BusinessStatistics',
    components:{
        header1,
        VanDatePicker
    },
    data(){
        return{
            h:'',
            active: 0,
            value: '',
            showPicker: false,
            minDate: new Date(2010, 5, 15),
            maxDate: new Date(2025, 10, 15),
            currentDate: new Date(),
            startDate: '',
            endDate: '',
            starDatehistory: '',
            endDatehistory: ''
        }
    },
    created(){
        this.h = window.innerHeight + 'px'
        this.date()
        this.lastdate(-7)
        console.log('开始时间:'+this.startDate+'结束时间：'+this.endDate)
        moni().then(res =>{
                    console.log(res)
                })
    },
    methods:{
        //打开时间选择器
       chose(){
        this.active = 2
        this.showPicker = !this.showPicker
       },
       // 取消
       cancel(){
        this.showPicker = !this.showPicker
        this.active = 0
        this.lastdate(-7)
       },
       // 确定
        onConfirm(value, index){
            console.log(`当前值：${value}, 当前索引：${index}`)
            this.startDate = value.slice(0,3).join('-')
            this.endDate = value.slice(4,7).join('-')
            this.starDatehistory = this.startDate
            this.endDatehistory = this.endDate
            this.value = this.startDate + '至' + this.endDate
            console.log('开始时间:'+this.startDate+'结束时间：'+this.endDate)
            this.showPicker = !this.showPicker
            moni().then(res =>{
                    console.log(res)
                })
        },
        // 改变
        onChange(picker, value, index) {
            console.log(`当前值：${value}, 当前索引：${index}`)
        },
        // 拿到今天时间
        date(){
            let year = new Date().getFullYear()
            let mon = new Date().getMonth() + 1
            let day = new Date().getDate()
            mon = this.gettime(mon)
            day = this.gettime(day)
            this.endDate = year+'-'+mon+'-'+day
            },
        // 拿到过去N天时间
        lastdate(day){
            this.date()
            let today = new Date()
            let daytime = today.getTime()+1000*60*60*24*day
            today.setTime(daytime)
            let year1 = today.getFullYear()
            let mon1 = today.getMonth() + 1
            let day1 = today.getDate()
            mon1 = this.gettime(mon1)
            day1 = this.gettime(day1)
            this.startDate = year1+'-'+mon1+'-'+day1
            this.value = this.startDate + '至' + this.endDate;
        },
        // 小于10+0
        gettime(time){
            var Time = time
            if(time.toString().length == 1){
                Time = '0' + time
            }
            return Time
        },
        // 标签点击事件
        show(){
            if(this.active=='0'){
                this.lastdate(-7)
                console.log('开始时间:'+this.startDate+'结束时间：'+this.endDate)
                moni().then(res =>{
                    console.log(res)
                })
            }
            if(this.active=='1'){
                this.lastdate(-30)
                console.log('开始时间:'+this.startDate+'结束时间：'+this.endDate)
                moni().then(res =>{
                    console.log(res)
                })
            }
            if(this.active=='2'){
                if(this.starDatehistory){
                    this.value = this.starDatehistory + '至' + this.endDatehistory
                    console.log('开始时间:'+this.starDatehistory+'结束时间：'+this.endDatehistory)
                    moni().then(res =>{
                    console.log(res)
                })
                }else{
                    this.value = '请选择日期'
                }
            }
        }

    }
}




</script>
<style scoped>
.bus{
    background-color:#f5f5f5;
}
.center{
    margin: 0 auto;
}
.date{
    font-size: 15px;
    color: #797979;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin: 0 auto;
}
.date_1{
    margin: 5px;
}
.date_2{
    width: 100px;
}
.t1{
    position: fixed;
    top:0;
    z-index: 1;
}
.last{
    width: 100%;
    height: 200px;
    background-color: #ffffff;
}
.foot{
    margin: auto;
    width: 80%;
    height: 100%;
    font-size: 15px;
    display: grid;
    grid-template-columns: repeat(2,1fr);
}
.foot_1{
   text-align: start;
}
.foot_2{
    text-align: end;
}
.foot_3{
    color: #cc0052;
}
</style>
